<template>
  <div>
  <el-container  style="height: 700px; border: 3px solid #eee">
    <el-header  style="text-align: center;height : 70px; font-size: 35px">学生管理系统</el-header>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/info">
                学生信息
                </router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/score">
                学生成绩
                </router-link>
              </el-menu-item>
            </el-menu-item-group>

          </el-submenu>


        </el-menu>
      </el-aside>

      <el-main>
        <el-form :inline="true" :model="search" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="search.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="search.sex" placeholder="性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
              <el-date-picker
                  v-model="search.birthday"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="tableData" border>
          <el-table-column prop="studentId" label="学号" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="birthday" label="出生日期">
          </el-table-column>
          <el-table-column prop="sex" label="性别">
          </el-table-column>
          <el-table-column prop="nativePlace" label="籍贯">
          </el-table-column>
          <el-table-column label = "操作">
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </el-table-column>
        </el-table>
        <br>

      </el-main>
    </el-container>
  </el-container>
  </div>


</template>
<script>
import axios from "axios";
export default {
  data(){
    return {
      tableData:[],
      search: {
        pageSize:10,
        name:"",
        sex:"",
        birthday:[]
      },
    }
  },
  methods: {
    onSubmit() {
      alert("提交成功");
    }
  },
  mounted(){
      axios.get("/api/stu").
      then((result) => {this.tableData = result.data.data;})
  }

}
</script>
<style>

</style>

